---
layout: layouts/layout.njk
title: Kitchen Sink
description: A collection of all the components available in Basecoat.
---
{% set components = [
  { label: "Accordion", id: "accordion" },
  { label: "Alert", id: "alert" },
  { label: "Alert Dialog", id: "alert-dialog" },
  { label: "Avatar", id: "avatar" },
  { label: "Badge", id: "badge" },
  { label: "Breadcrumb", id: "breadcrumb" },
  { label: "Button", id: "button" },
  { label: "Card", id: "card" },
  { label: "Checkbox", id: "checkbox" },
  { label: "Combobox", id: "combobox" },
  { label: "Dialog", id: "dialog" },
  { label: "Dropdown Menu", id: "dropdown-menu" },
  { label: "Form", id: "form" },
  { label: "Input", id: "input" },
  { label: "Label", id: "label" },
  { label: "Pagination", id: "pagination" },
  { label: "Popover", id: "popover" },
  { label: "Radio Group", id: "radio-group" },
  { label: "Select", id: "select" },
  { label: "Skeleton", id: "skeleton" },
  { label: "Slider", id: "slider" },
  { label: "Switch", id: "switch" },
  { label: "Table", id: "table" },
  { label: "Tabs", id: "tabs" },
  { label: "Textarea", id: "textarea" },
  { label: "Toast", id: "toast" },
  { label: "Tooltip", id: "tooltip" }
] %}

<div class="flex gap-x-10 justify-center">
  <div>
    <header class="space-y-2 mb-8">
      <h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
      <p class="text-muted-foreground">{{ description }}</p>
    </header>
    <div class="grid gap-4 flex-1">
      {% for component in components %}
        {% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
      {% endfor %}
    </div>
  </div>
  <div class="hidden text-sm xl:block w-full max-w-[200px]">
    {% from "macros/toc.njk" import toc_nav %}
    {{ toc_nav(components) }}
  </div>
</div>
